import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Table, DatePicker, Tabs, message, } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import {
  fetchAudit,
} from '@/services/distribution/commissionPlace'

const { TabPane } = Tabs;
const hasSearchBtn = JSON.parse(localStorage.getItem('hasSearchBtn'))
const columns = [
  {
    title: '序号',
    dataIndex: 'sort',
    key: 'sort',
    render: (t) => <>{t + 1}</>
  },
  {
    title: '申请时间',
    dataIndex: 'time',
    key: 'time',
  },
  {
    title: '申请金额',
    dataIndex: 'card',
    key: 'card',
  },
  {
    title: '银行账号',
    dataIndex: 'phone',
    key: 'phone',
  },
  {
    title: '收款人',
    dataIndex: 'money',
    key: 'money',
  },
  {
    title: '电话',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  {
    title: '备注',
    dataIndex: 'dec',
    key: 'dec',
  },
  {
    title: '支付登录',
    dataIndex: 'status',
    key: 'status',
  },
];
const tabs = [{
  label: '佣金提现',
  value: '1'
}, {
  label: '提现记录',
  value: 0
}]
const Audit = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [data, setData] = useState([])
  
  useEffect(() => {
    init()
  }, [])
  // request unfinished
  const init = async (params = {
    pageNo: 1,
    pageSize: 10,
    status: "1",
  }) => {
    const res = await fetchAudit(params)
    res.code == 0 ? setData(res.data) : message.warn(res.mag)
  }

  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)

    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return(
      <>
        <Col span={8}>
          <Form.Item label={`收款人`}>
            {getFieldDecorator(`name`, {})
              (<Input />)}
          </Form.Item>
        </Col>
        <Col span={8}>
        <Form.Item label={`申请日期`}>
          {getFieldDecorator(`id`, {})
            (<DatePicker />)}
        </Form.Item>
      </Col>
      </>
    )
  }
  // 按钮处理
  const handleBtn = type => {
    
  }

  const handleTabs = key => {
    console.log('key', key);
    if (key == 0) {
      init({
        pageNo: 1,
        pageSize: 10
      })
    } else {
      init()
    }
    
  }
  return (
    <PageHeaderWrapper>
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
      <RenderButtom click={handleBtn} />
      <Tabs onChange={handleTabs}>
        {
          tabs.map(t => 
            <TabPane tab={t.label} key={t.value} key={t.value}>
              <Table 
                columns={columns}
                dataSource={data}
              />
            </TabPane>
          )
        }
      </Tabs>
      
    </PageHeaderWrapper>
    )
}

export default Form.create()(Audit)
